<template>
  <div class="seamlessScroll">
    <vue-seamless-scroll :data="listData" class="seamless-warp">
        <ul class="item">
            <li v-for="(item,index) in listData" :key="index">
                <div class="p10 title-area">
                  <Tag v-if="item.type == '1'" color="default"><Icon type="md-volume-down" class="blue" />公告</Tag>
                  <Tag v-if="item.type == '3'" color="red"><Icon  type="md-bonfire" class="hot" />热门</Tag>
                  <Tag v-if="item.type == '2'" color="blue"><Icon type="ios-thumbs-up" class="thumbs-up" />推荐</Tag>
                  <span class="title" v-text="item.title.substring(0, 60)"></span>
                 </div>
                <span class="date p10" v-text="item.date"></span>
            </li>
        </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import { noviceList } from '@/request/api.js';
export default {
  props: {
  },
  data () {
    return {
      listData: []
    };
  },
  created() {
    this.getNoviceList();
  },
  watch: {
  },
  methods: {
    getNoviceList() {
      noviceList().then((res) => {
        this.listData = res;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.seamless-warp {
  height: 12.5rem;
  overflow: hidden;
}
.item {
  li{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
.hot{
  color: #ff0000;
  font-size: 1rem;
}
.blue{
  color: #2b85e4;
}
.thumbs-up{
  color: #ff9900;
  font-size: 0.875rem;
}
.p10{
  padding: 0.125rem 0;
}
.title{
  text-align: left;
  display: inline-block;
}
</style>
